:root {
    --primary: #1e88e5;   /* Biru sekolah */
    --secondary: #2e7d32; /* Hijau aksen */
    --bg-light: #f5f7fa;
    --text-main: #1f2937;
}
        html,
        body {
            height: 100%;
            margin: 0;
        }

        .bg-left {
            position: relative;
            /* background-image: url("<?= base_url('assets/img/bginfo.png') ?>"); */
            background-image: url('../img/bginfo.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            overflow: hidden;
        }

        /* Layer blur di atas background */
        .bg-left::before {
            content: "";
            position: absolute;
            inset: 0;
            background: inherit;
            filter: blur(4px);
            /* UBAH ANGKA INI: 4px, 6px, 8px, dst */
            transform: scale(1.05);
            /* Biar pinggir blur gak kepotong */
            z-index: 1;
        }

        /* Layer gelap tipis biar teks makin kebaca */
        .bg-left::after {
            content: "";
            position: absolute;
            inset: 0;
            background: linear-gradient(to right,
                    rgba(0, 0, 0, 0.55),
                    rgba(0, 0, 0, 0.35),
                    rgba(0, 0, 0, 0.2));
            z-index: 2;
        }

        /* Konten di atas blur */
        .bg-left .content-left {
            position: relative;
            z-index: 3;
        }

        .content-left h2 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
            margin-top: 25px;
        }

        .content-left h3 {
            font-family: 'Poppins', sans-serif;
            font-weight: 700;
            letter-spacing: 0.5px;
            text-shadow: 0 2px 8px rgba(0,0,0,0.5);
            margin-top: -10px;
            color: #E6AE30;
            font-size: 25px !important;
        }

        .content-left h4 {
            font-family: 'Poppins', sans-serif;
            color: #005700;
            font-size: 28px !important;
            -webkit-text-stroke: 0.5px #FFD700;  /* outline kuning */
            font-weight: 700;
        }

        .content-left p {
            font-size: 1.05rem;
            line-height: 1.5;
            text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
            color: #E5E7EB;
            font-weight: 600;
        }

        .bg-right {
            /* background-image: url("<?= base_url('assets/img/bglogin.png') ?>"); */
            background-image: url('../img/bglogin.png');
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        /* Biar form kebaca di atas gambar */
        .overlay {
            background: rgba(255, 255, 255, 0.85);
            padding: 2rem;
            border-radius: 10px;
            width: 100%;
            max-width: 400px;
        }

        .overlay-dark {
            background: rgba(0, 0, 0, 0.5);
            color: #fff;
            padding: 3rem;
            border-radius: 12px;
        }

        .overlay-right {
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        }
  
/* ====== ANIMATIONS ====== */
@keyframes fadeSlideDown {
    from {
        opacity: 0;
        transform: translateY(-50px); /* dari ATAS */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeSlideLeft {
    from {
        opacity: 0;
        transform: translateX(50px); /* dari KANAN */
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* mulai dari BAWAH */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInOnly {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Terapkan ke teks */
.animate-fade {
    animation: fadeInOnly 5.0s ease-out both;
}

/* Terapkan ke teks */
.animate-card {
    animation: fadeSlideDown 1.0s ease-out both;
}

.animate-text {
    animation: fadeSlideDown 1.0s ease-out both;
}

.animate-text2 {
    animation: fadeSlideLeft 2.0s ease-out both;
}

.animate-card.delay-1 {
    animation-delay: 0.8s;
}

.animate-text2.delay-2 {
    animation-delay: 0.6s;
}

.animate-text3 {
    animation: fadeSlideUp 0.8s ease-out both;
}
.animate-text3.delay-3 {
    animation-delay: 1.5s;
}

/* Responsive */

/* Tablet */
@media (max-width: 992px) {
    .title br {
        display: none !important;
    }
}

/* HP */
@media (max-width: 576px) {
    .content-left h2 {
          font-size: 20px !important;
        }

    .content-left h3 {
            font-size: 16px !important;
        }

    .content-left p {
        font-size: 14px !important;
        }

    .title br {
        display: none !important;
    }
}